<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :fanhui="true">
			<block slot="content">内容详情</block>
		</cu-custom>
		<view class="cu-card dynamic cc"
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="header-box">
						<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
						<view class="header-title">
							<view class="a">{{ Textitem.title }}</view>
							<view class="text-gray text-sm flex justify-between b">
								{{ Textitem.publishTime }}
							</view>
						</view>
					</view>
				</view>
				<view class="text-sm text-right padding footer-fav">
					<view class="coll">
						<text class="cuIcon-attentionfill margin-lr-xs as">点击量：{{ clickCount}}</text>
					</view>
					<view class="coll" >
						<uni-fav  class="favBtn" circle="true" :bg-color="collstu"  @click="clickSC"></uni-fav>
						<view class="coll-num">{{ count }}</view>
					</view>
				</view>
				<view class="news">
					<rich-text :nodes="Textitem.content" selectable="true" class="richBox"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniFav from '@/components/uni-fav/uni-fav.vue'
	export default {
		components: {uniFav},
		data() {
			return {
				collstu:'',
				token:'',
				user:{},
				id:'',
				tid:'',
				clickCount:'',
				count:'',
				Textitem:{
					title:'',
					publishTime:'',
					content:'',
				},
			}
		},
		onShow() {
		},
		onHide() {
			this.collstu = 'collLogoFalse'
		},
		created() {
		},
		onLoad: function (option) {
				uni.showLoading({
					title: '加载中'
				})
				let user = uni.getStorageSync("userinfo")
				let token = uni.getStorageSync("token")
				this.token = token
				this.user = user
				this.id = option.id
				this.tid = option.tid
				this.clickCount = option.clickCount
				this.Textitem.title = option.title
				this.Textitem.publishTime = option.publishTime
				this.count = option.count
				this.status  = option.status
				this.dishs()
				if(this.status === 'true'){
					this.collstu = '#dd524d'
				}else{
					this.collstu = '#AAAAAA'
				}
		    },
		methods: {
			// 点击收藏
			clickSC(){
				if(this.collstu === '#dd524d'){
					var data = {
						articleId: this.tid,
						userId: this.user.id,
						tag: "收藏"
					}
					this.http.postaction('/policy/articleCollectionExe/delete', data)
					.then(res => {
						// res[1].data.result.status
						this.collstu = '#AAAAAA'
						this.count = res.data.result.count
					})
					.catch(err => {
						console.log(err)
					})
					
				}else{
					var date =  {
						articleId: this.tid,
						userId: this.user.id,
						tag: "收藏"
					}
					// var a = JSON.stringify(date)
					this.http.postaction('/policy/articleCollectionExe/add', date)
					.then(res => {
						this.collstu = '#dd524d'
						this.count = res.data.result.count
					})
					.catch(err => {
						console.log(err)
					})

				}	
			},
			
			async dishs(){

				const [error, res] = await uni.request({
					url: 'https://weixin.policyol.com/policyexe/getContent',
					method: 'GET',
					data: {id: this.id},
				});
				this.Textitem.content = res.data.result.policyContent.replace(/<table width="650">/g, "<table>")
				uni.hideLoading()
			}
		}
	}
</script>

<style>

.cc{
	background-color: #FAF9DE;
}
.news{
	background-color: #FAF9DE;
	padding: 15upx 30upx;
}
.footer-fav{
	display: flex;
	justify-content: end;
	background-color: #FFFFFF;
}
.coll{
	display: flex;
	align-items: center;
	height: 50upx;
}

.as{
	line-height: 50upx;
}

.collLogo{
	width: 30upx;
	height: 30upx;
	background-color: red;
	transition: 0.5s;
}
.collLogoFalse{
	width: 30upx;
	height: 30upx;
	background-color: #555555;
	transition: 0.5s;
}
.header-box{
	display: flex;
	justify-content: space-between;
	height: 100%;
	background-color: #FFFFFF;
}
.header-title{
	width: 85%;
}
.a{
	font-size: 34upx;
}
.b{
	margin-top: 20upx;
	font-size: 28upx;
}
table{
	width: 350upx !important;
}
</style>
